$(document).ready(function(){
    $('div.general-popups').text('').hide();
    // 网页加载完成时，将所有控件恢复初始状态
    clearInput();
    // 给登录选项卡添加切换的点击事件
    initTabs();
    // 给登录button添加输入框校验的事件
    verifyLoginBtn();
    // 给协议选框添加事件
    initCheckBox();
    // 给获取验证码的button添加读秒的点击事件
    initGetCode();
});

/**
 * 给选项卡添加点击事件
 */
function initTabs() {
    $('div.tabs div.loginForm').hide().eq(0).show();
    let tabs = $('div.tabs>div.tabs_head>a');
    for (let i = 0; i < tabs.length; i++) {
        // 给第i个选项卡添加点击事件
        tabs.eq(i).click(function(){
            // 给第i个选项卡添加class:checked
            tabs.removeClass('checked').eq(i).addClass('checked');
            $('div.tabs>div.tabs_content>div.loginForm').hide().eq(i).show();
            clearInput();
        });
    }
}

/**
 * 切换tab时清除输入框、取消协议勾选、禁用短信登录的button
 */
function clearInput() {
    $('#account').val('');
    $('#password').val('');
    $('#phone').val('');
    $('#code').val('');
    // 设置勾选框选项状态为false
    $('div.tabs>div.tabs_content>div.loginForm>div.rules input')
        .prop('checked', false);
    $('div.tabs>div.tabs_content>div.loginForm>button')
        .eq(1).addClass('disabledBtn')
        .attr('disabled', true);
}

/**
 * 为获取验证码的button绑定点击事件
 */
function initGetCode() {
    $('div.tabs>div.tabs_content>div.loginForm>div>button').click(function() {
        // 先校验手机号
        let phone = $('#phone');
        // 使用正则表达式校验
        if (!/^1[3-9]\d{9}$/.test(phone.val())) {
            showGeneralPopups('请输入正确的手机号', 2000);
            return;
        }
        /*
         1、改变button的内容为：60s后重发
         2、开始计时，从60~0
         3、设置button为禁用点击
         4、设置手机号输入框为只读，设置属性readonly='true'
         */
        phone.attr('readonly', true);
        let time = 60;
        let button = $('div.tabs>div.tabs_content>div.loginForm>div>button');
        $('div.tabs>div.loginForm>div>button')
            .text(time + 's后重发').attr('disabled', true);
        time--;
        // 周期性函数是一个异步的操作
        let interval = setInterval(function() {
            button.text(time + 's后重发');
            time--;
            if (time < 0) {
                // 取消读秒
                clearInterval(interval);
                $('#phone').removeAttr('readonly');
                button.text('获取验证码').removeAttr('disabled');
            }
        }, 1000);
    });
}

/**
 * 为登录button绑定点击事件
 */
function verifyLoginBtn() {
    let button = $('div.tabs>div.tabs_content>div.loginForm>button');
    // 给账号登录的button绑定点击事件
    button.eq(0).click(function() {
        // 账号、密码是否为空
        let account = $('#account').val();
        if (!account.trim()) {
            showGeneralPopups('请输入手机号/账号', 2000);
            return;
        }
        let password = $('#password').val();
        if (!password.trim()) {
            showGeneralPopups('请输入密码', 2000);
            return;
        }
        location.href = 'home.html';
    });
    // 给短信登录的button绑定点击事件
    button.eq(1).click(function() {
        // 手机号、验证码是否为空
        let phone = $('#phone').val();
        if (!phone.trim()) {
            showGeneralPopups('请输入手机号', 2000);
            return;
        }
        let code = $('#code').val();
        if (!code.trim()) {
            showGeneralPopups('请输入验证码', 2000);
            return;
        }
        location.href = 'home.html';
    });
}

/**
 * 协议选框勾选/去勾选时，恢复/禁用短信登录的button
 */
function initCheckBox() {
    let button = $('div.tabs>div.tabs_content>div.loginForm>button');
    button.eq(1).addClass('disabledBtn').attr('disabled', true);
    $('div.tabs>div.tabs_content>div.loginForm>div.rules input').click(function() {
        if ($(this).is(':checked')) {
            // 移除短信登录button的class：disabledBtn
            // 设置禁用点击，通过元素的disabled属性
            button.eq(1).removeClass('disabledBtn').removeAttr('disabled');
        } else {
            // 添加短信登录button的class：disabledBtn
            // 禁用点击
            button.eq(1).addClass('disabledBtn').attr('disabled', true);
        }
    });
}

/**
 * 封装通用的弹出层方法
 * @param message 弹出层信息
 * @param keepTime 保留时间，毫秒数
 */
function showGeneralPopups(message, keepTime) {
    $('div.general-popups').text(message).show();
    setTimeout(function(){
        $('div.general-popups').text('').hide();
    }, keepTime);
}